<template>
  <div>
    <headImg></headImg>
    <div class="input-box">
      <div class="input-item register">
        <img class="phone-img-2" v-show="pwd.Number === ''" src="../../assets/img/login/pwd.png">
        <img class="phone-img-2" v-show="pwd.Number !== ''" src="../../assets/img/login/pwd-click.png">
        <input v-show="!pwd.show" class="input-identify" v-model="pwd.Number" type="password" placeholder="请设置您的密码">
        <input v-show="pwd.show" class="input-identify" v-model="pwd.Number" type="text" placeholder="请设置您的密码">
        <img v-show="pwd.show"
             class="closeEye"
             @click="changePwd"
             src="../../assets/img/login/showPwd.png"
        >
        <img v-show="!pwd.show"
             class="closeEye"
             @click="changePwd"
             src="../../assets/img/login/closePwd.png"
        >
      </div>
      <div class="input-item pwd">
        <img class="identify-img" v-show="pwd2.Number === ''" src="../../assets/img/login/pwd.png">
        <img class="identify-img" v-show="pwd2.Number !== ''" src="../../assets/img/login/pwd-click.png">
        <input v-show="!pwd2.show" class="input-phone" v-model="pwd2.Number" type="password" placeholder="确认密码">
        <input v-show="pwd2.show" class="input-phone" v-model="pwd2.Number" type="text" placeholder="确认密码">
        <img v-show="pwd2.show"
             class="closeEye"
             @click="changePwd2"
             src="../../assets/img/login/showPwd.png"
        >
        <img v-show="!pwd2.show"
             class="closeEye"
             @click="changePwd2"
             src="../../assets/img/login/closePwd.png"
        >
      </div>
      <div class="input-button btn-small" @click="sendcode">确定</div>
      <div class="other">
        <router-link id="login" to="/login"><span>返回登录>></span></router-link>
      </div>
    </div>
  </div>
</template>

<script>
import headImg from '../head'
import {newUser, VXMDFPWD} from '../../api/request'
import {Toast} from 'vue-ydui/dist/lib.rem/dialog'

export default {
  components: {headImg},
  data () {
    return {
      action: '',
      pwd: {
        Number: '',
        show: false
      },
      pwd2: {
        Number: '',
        show: false
      },
      code: ''
    }
  },
  created () {
    this.action = this.$route.params.action
    let str = location.href
    if (str.indexOf('code=') > -1) {
      this.code = str.substring(str.indexOf('code=') + 5, str.indexOf('&state='))
    }
  },
  methods: {
    changePwd: function () {
      this.pwd.show = !this.pwd.show
    },
    changePwd2: function () {
      this.pwd2.show = !this.pwd2.show
    },
    sendcode: function () {
      if (this.pwd2.Number === '' || this.pwd.Number === '') {
        Toast({mes: '密码不能为空', timeout: 1000})
      } else if (this.pwd2.Number !== this.pwd.Number) {
        Toast({mes: '俩次密码输入不一致', timeout: 1000})
      } else if (this.pwd.Number.length < 6 || this.pwd.Number.length > 16) {
        //  alert('请输入6-16位的密码')
        Toast({mes: '请输入6-16位的密码', timeout: 1000})
      } else {
        if (this.action === 'REGIST') {
          let a = location.href
          let phoneNumber = a.substring(a.indexOf('state=') + 6, a.indexOf('#/setPWD'))
          newUser(this.pwd.Number, this.code, this.pwd2.Number, phoneNumber).then(
            res => {
              console.log(res.data)
              if (res.data.code === 200) {
                console.log(res.data)
                this.$router.push({path: '/login'})
              } else {
                console.log(res.data.code)
                Toast({mes: res.data.msg, timeout: 1000})
              }
            },
            error => {
              console.log(error)
            })
        } else if (this.action === 'FORGETPWD') {
          VXMDFPWD(this.$store.state.user.userId, this.pwd.Number, this.pwd2.Number).then(
            res => {
              if (res.data.code === 200) {
                Toast({mes: '密码修改成功', timeout: 1000})
                this.$router.push({path: '/login'})
              } else {
                console.log(res.data.code)
                Toast({mes: res.data.msg, timeout: 1000})
              }
            },
            error => {
              console.log(error)
            })
        }
      }
    }
  }
}
</script>

<style scoped>
  .register {
    position: relative
  }

  .input-identify {
    width: 2.2rem;
    color: #848282;
    font-size: 0.3rem;
    line-height: 0.4rem;
    padding-left: 0.15rem;
  }

  .identify-clear {
    float: right;
    margin-right: 0.2rem;
  }

  .closeEye {
    float: right;
    width: 0.28rem;
    height: 0.19rem;
    margin-top: 0.15rem;
    margin-right: 0.2rem;
  }

  .showPwd {
    margin-left: 0.2rem;
    color: #848282;
  }
</style>
